<template>
  <view class="safe-area-inset-bottom">
    <!-- 帮助中心头部 -->
    <view class="top-header">
      <view class="top-header-bg">
        <h1 class="title">欢迎来到励氪签帮助中心</h1>
        <view class="search">
          <uni-easyinput v-model="searchKeyword" type="text" placeholder="请输入搜索关键字"/>
          <button class="search_btn" size="mini" @click="toSearch">搜索</button>
        </view>
      </view>
    </view>
    <!-- 帮助中心目录 -->
    <view v-if="!!menuOptions && menuOptions.length > 0">
      <view style="margin: 15rpx;" v-for="(oneItem, oneIndex) in menuOptions">
        <!--目录-->
        <uni-section v-if="oneItem.isMenu == 1" :title="oneItem.label" type="line">
          <view v-for="(twoItem, twoIndex) in oneItem.children" style="margin: 0 10rpx;">
            <!--目录-->
            <uni-collapse v-if="twoItem.isMenu == 1">
              <uni-collapse-item :title="twoItem.label">
                <template v-slot:title>
                  <view class="uni-collapse-item_title">
                    <uni-view class="uni-collapse-item_title_circle"></uni-view>
                    <span>{{ twoItem.label }}</span>
                  </view>
                </template>
                <!--文章-->
                <uni-list-item
                    v-for="(threeItem, threeIndex) in twoItem.children"
                    :title="threeItem.label"
                    style="margin: 0 0 0 20rpx;"
                    showArrow
                    clickable
                    @click="toDetail(threeItem)"
                ></uni-list-item>
              </uni-collapse-item>
            </uni-collapse>
            <!--文章-->
            <uni-list-item v-else :title="twoItem.label" showArrow clickable @click="toDetail(twoItem)"/>
          </view>
        </uni-section>
        <!--文章-->
        <uni-list-item v-else :title="oneItem.label" showArrow clickable @click="toDetail(oneItem)"/>
      </view>
    </view>
    <!-- 暂无数据 -->
    <luanqingEmpty :show="true" text="没有数据啦" v-else/>
  </view>
</template>

<script>
import luanqingEmpty from '@/components/luanqing-empty/luanqing-empty';
import {listHelpMenuTree} from "../../../api/ec/common/helpMenu";

export default {
  components: {luanqingEmpty},
  data() {
    return {
      // 加载样式：more-加载前样式，loading-加载中样式，nomore-没有数据样式
      loadStatus: 'loading',
      // 搜索框输入内容
      searchKeyword: '',
      // 目录树数据
      menuOptions: undefined,
    }
  },
  created() {
    this.getHelpMenuTree();
  },
  methods: {
    /** 获取帮助中心的树结构 */
    getHelpMenuTree() {
      uni.showLoading({title: '加载中...', mask: true});
      listHelpMenuTree().then(response => {
        uni.hideLoading()
        this.menuOptions = response.data;
      }).catch(() => {
        uni.hideLoading()
      });
    },
    /** 查看详情 */
    toDetail(item) {
      uni.navigateTo({url: './detail?id=' + item.id + '&osType=' + item.osType + '&relevanceId=' + item.relevanceId});
    },
    /** 到搜索页面 */
    toSearch() {
      if (!!this.searchKeyword) {
        uni.navigateTo({url: './helpSearch?keyword=' + this.searchKeyword});
      }
    },
  }
}
</script>

<style scoped lang="scss">
page {
  background: $uni-bg-color-grey;
}

.top-header {
  width: 100%;
  height: 240rpx;
  background: url("../../../static/images/help_top_header_bg.png");
  transition: all .4s ease-in-out;
}

.top-header .top-header-bg {
  height: 100%;
  background-repeat: no-repeat;
  background-size: auto 205rpx;
  background-position: top;
}

.top-header .title {
  padding: 44rpx 0 24rpx;
  text-align: center;
  font-size: 36rpx;
  line-height: 50 rrpx;
  font-size: 32rpx;
  font-weight: 550;
  color: #333;
}

.top-header .search {
  width: 636rpx;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  margin: 0 auto;
}

.top-header .search_btn {
  height: 35px;
  margin-left: 5rpx;
  font-size: 14px;
  background-color: $uni-color-primary;
  border-radius: 10rpx;
  color: #fff;
}

::v-deep .uni-section .uni-section-header__decoration.line {
  background-color: $uni-color-primary;
}

.uni-collapse-item_title {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 12px 10px;
  font-weight: normal;
}

.uni-collapse-item_title_circle {
  width: 8px;
  height: 8px;
  border-radius: 10px;
  background-color: #00a660;
  margin-right: 5px;
}

</style>
